<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>RAUM B</title>
    <link rel="stylesheet" href="styleB.css"/>
    <script src="jquery-1.11.2.min.js"></script>
    <script>
        $(function(){
            $('.bag, .gnbS').hover(function(){
                $('.gnbS').show();
            },function(){
                $('.gnbS').hide();
            });
            $('.cart, .cartS').hover(function(){
                $('.cartS').show();
            },function(){
                $('.cartS').hide();
            });

            $('.sideA').mouseenter(function(){
            });

            $('.side').find('a').hover(function(){
                        $(this).css('cssText','background: none').removeClass('chk');
                        $(this).one('click',function(e){
                            $(this).parents('ul').siblings().find('a').css('cssText','background: #000; opacity: 0.5');
                            $(this).addClass('chk').parents('li').siblings().find('a').css('cssText','background: #000; opacity: 0.5');
                            $('.visualArea li:first').fadeOut(1000, function(){
                                $('.visualArea').append($(this));
                            }).next().fadeIn(1000);
                            e.preventDefault();
                        });
                    },function(){
                        if(!$(this).hasClass('chk')){
                            $(this).css('cssText','background: #000; opacity: 0.5');
                        }
                    }
            );
        });
    </script>
</head>
<body>

<div id="wrap">
    <header id="header">
        <img src="imgB/gnb.png" alt=""/>
        <img src="imgB/gnbS.png" class="gnbS" alt=""/>
        <img src="imgB/cartS.png" class="cartS" alt=""/>
        <a href="imgB/../indexB.html" class="bag">BAG&amp;ACC</a>
        <a href="imgB/../indexB.html" class="cart">cart</a>
    </header>
    <section id="visual">
        <ul class="visualArea">
            <li><img src="imgB/visualA.png" alt=""/></li>
            <li><img src="imgB/visualB.png" alt=""/></li>
        </ul>
        <div class="side">
            <ul class="sideA">
                <li><img src="imgB/sideA1.png" alt=""/><a href="#none">sideA1</a></li>
                <li><img src="imgB/sideA2.png" alt=""/><a href="#none">sideA2</a></li>
                <li><img src="imgB/sideA3.png" alt=""/><a href="#none">sideA3</a></li>
                <li><img src="imgB/sideA4.png" alt=""/><a href="#none">sideA4</a></li>
                <li><img src="imgB/sideA5.png" alt=""/><a href="#none">sideA5</a></li>
                <li><img src="imgB/sideA6.png" alt=""/><a href="#none">sideA6</a></li>
                <li><img src="imgB/sideA7.png" alt=""/><a href="#none">sideA7</a></li>
                <li><img src="imgB/sideA8.png" alt=""/><a href="#none">sideA8</a></li>
                <li><img src="imgB/sideA9.png" alt=""/><a href="#none">sideA9</a></li>
                <li><img src="imgB/sideA10.png" alt=""/><a href="#none">sideA10</a></li>
            </ul>
            <ul class="sideB">
                <li><img src="imgB/sideB1.png" alt=""/><a href="#none">sideB1</a></li>
                <li><img src="imgB/sideB2.png" alt=""/><a href="#none">sideB2</a></li>
                <li><img src="imgB/sideB3.png" alt=""/><a href="#none">sideB3</a></li>
                <li><img src="imgB/sideB4.png" alt=""/><a href="#none">sideB4</a></li>
                <li><img src="imgB/sideB5.png" alt=""/><a href="#none">sideB5</a></li>
                <li><img src="imgB/sideB6.png" alt=""/><a href="#none">sideB6</a></li>
                <li><img src="imgB/sideB7.png" alt=""/><a href="#none">sideB7</a></li>
                <li><img src="imgB/sideB8.png" alt=""/><a href="#none">sideB8</a></li>
                <li><img src="imgB/sideB9.png" alt=""/><a href="#none">sideB9</a></li>
                <li><img src="imgB/sideB10.png" alt=""/><a href="#none">sideB10</a></li>
            </ul>
            <div class="sblind"></div>
        </div>
    </section>
    <section id="container">
        <img src="imgB/tmp.png" alt=""/>
    </section>
    <footer id="footer">
        <img src="imgB/footer.png" alt=""/>
    </footer>
</div>

</body>
</html>